<template>
  <div class="ui container notes">
    <h4 class="ui horizontal divider header">
      <i class="paw icon"></i>
      Ninghao Notes App _ vue.js
    </h4>
    <a class="ui right floated basic violet button" @click="create">
      添加笔记
    </a>
    <div class="ui divided items">
      <Note
        v-for="entity in entities"
        :key="entity.$loki"
        :entity="entity"
      ></Note>
      <span class="ui small disabled header" v-if="!entities.length"
        >还没有笔记请按下 '添加笔记' 按钮</span
      >
    </div>
  </div>
</template>

<script>
import Note from "./Note";
import { mapGetters, mapActions } from "vuex";
export default {
  created() {
    this.initial();
  },
  name: "Notes",
  components: {
    Note
  },
  methods: {
    ...mapActions(["initial", "create"])
  },
  computed: {
    ...mapGetters(["entities"])
  }
};
</script>

<style></style>
